<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }
    </style>
</head>
<body>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="toolbarDemo">

    <div class="demoTable" style="margin-left: -15px;margin-top: -2px">
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入关键字">
        </div>
        <button class="layui-btn" data-type="reload">查询</button>
    </div>
    <div class="layui-btn-container">
        <a lay-event="addlevel">
            <button class="layui-btn layui-btn-sm" onclick="addle()" style="float: right;margin-right: -80px; margin-top: -36px;">
                添加领域
            </button>
        </a>
        <button class="layui-btn layui-btn-sm" id="deleteUserByIds" style="float: right;margin-right: 10px; margin-top: -36px;">批量删除</button>
    </div>
</script>
<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">编辑</font>
    </a>
    <a>|</a>
    <a lay-event="del">
        <font color="red">删除</font>
    </a>
</script>


<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: 'field',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports'],
            title: '领域表',
            id: 'testReload',
            cols: [
                [{
                    type: 'checkbox'
                    // fixed: 'left'
                }, {
                    field: 'zizeng',
                    width: 110,
                    title: '序号',
                    templet: '#zizeng',
                    hide: true
                }, {
                    field: 'domoinId',
                    title: 'ID',
                    hide: true
                }, {
                    field: 'domoinName',
                    title: '领域',
                    width: 780,
                    align: 'center'
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 450
                }]
            ],
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']//自定义分页布局
                , first: false //不显示首页
                , last: false //不显示尾页
            },
            height: 550
        });


// 模糊查询 搜索
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        demoReload: demoReload
                    }
                });
            }
        };

        //模糊查询提交
        $('body').on('click','.demoTable .layui-btn',function() {
            // $("#deleteUserByIds").css("display", "none");
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //批量删除
        $("#deleteUserByIds").click(function () {
            var checkStatus = table.checkStatus('testReload'),
                data = checkStatus.data,
                file_id = "";
            if (data.length > 0) {
                for (var i in data) {
                    file_id += data[i].domoinId + ",";
                }
                console.log(file_id);
                layer.confirm('确定删除选中的领域？', {
                    icon: 3,
                    title: '提示信息'
                }, function (index) {
                    $.ajax({
                        url: '/delFiByIds',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            ids: file_id
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 6
                                }, function () {
                                    location.reload()
                                    // window.location.href = "/selUser"
                                });
                            } else {
                                layer.alert("删除失败")
                            }
                        }

                    })
                })
            } else {
                layer.msg("请选择需要删除的领域");
            }
        });


        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'edit':
                    layer.msg(obj.data.rankName)
                    break;
                case 'del':
                    layer.msg(obj.data.rankId)
            }
            ;
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;

            if (obj.event === 'del') {
                var flag = confirm("您确定要删除吗？");
                if (flag) {
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        url: 'delfield',
                        data: {domoinId: data.domoinId},
                        success: function (data) {
                            if (data == "200") {
                                alert("删除成功");
                                window.location.href = "/fieldjump";
                            } else {
                                alert("删除失败")
                            }
                        }
                    })
                }
                ;
            }


            if (obj.event === 'edit'){
                $("#boxDiv").css("display","block");
                $("#rankId").val(data.domoinId);
                $("#rankName").val(data.domoinName);
            }




        });
    });

</script>
<script>
    //日期范围
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test6'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , range: ['#userCreateTime', '#userFinishTime']
            // ,range: true
        });
    });

    function addle(){
        $("#boxDiv2").css("display", "block");
    }
    function addsub() {
        var flag = confirm("您确定要添加该领域吗？")
        if (flag) {
            let domoinName = document.getElementById("rankName2").value;
            $.ajax({
                url: "addfield",
                async: true,
                type: "post",
                data: {domoinName: domoinName},
                dataType: "json",
                success: function (data) {
                    if (data == "200") {
                        alert("添加成功")
                        window.location.href = "/fieldjump";
                        // window.open("/success.jsp")
                    } else if (data == "201") {
                        alert("添加失败，请重新添加")
                    }else {
                        alert("已有此领域")
                    }
                }
            })
        }
    }

    //修改
    function sub() {
        var flag = confirm("您确定要修改领域信息吗？")
        if (flag) {
            let domoinId = document.getElementById("rankId").value;
            let domoinName = document.getElementById("rankName").value;
            $.ajax({
                url: "updfield",
                async: true,
                type: "post",
                data: {domoinId: domoinId,domoinName: domoinName},
                dataType: "json",
                success: function (data) {
                    if (data == "200") {
                        alert("修改成功")
                        window.location.href = "/fieldjump";
                        // window.open("/success.jsp")
                    } else if (data == "201") {
                        alert("修改失败，请重新修改")
                    }else {
                        alert("已有此级别")
                    }
                }
            })
        }
    }

    //取消
    function cancel() {
        $("#boxDiv").css("display", "none");
        $("#boxDiv2").css("display", "none");
    }



</script>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv">
    <form onsubmit="return false">
        <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="260" height="300">
            <caption id="hear" style="font-size: 50px">修改领域</caption>
            <tr id="id" style="display: none">
                <td style="display: none">&nbsp;&nbsp;&nbsp;ID</td>
                <td><input class="layui-layer-input" type="hidden" id="rankId"/></td>
            </tr>
            <tr>
                <td id="echo" style="font-size: 25px">领域</td>
                <td><input class="layui-layer-input" type="text" id="rankName" autocomplete="off"/></td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2" align="center">
                    <button class="button1" onclick="sub()">提交</button>
                    <button class="button2" onclick="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </form>
</div>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv2">
    <form onsubmit="return false">
        <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="260" height="300">
            <caption style="font-size: 50px">添加领域</caption>
            <!--            <tr>-->
            <!--                <td>&nbsp;&nbsp;&nbsp;ID</td>-->
            <!--                <td><input class="layui-layer-input" type="text" id="rankId"/></td>-->
            <!--            </tr>-->
            <tr>
                <td style="font-size: 25px">领域</td>
                <td><input class="layui-layer-input" type="text" id="rankName2" autocomplete="off"/></td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2" align="center">
                    <button class="button1" onclick="addsub()">提交</button>
                    <button class="button2" onclick="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
